<template>
  <div class="screen overview page-content">
    <screen-header :title="'后勤一站式服务信息系统'" :is-home="true"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6" class="ibox-group">
          <div class="ibox box1-1">
            <div class="ibox-header">
              <span class="ibox-title">今日任务情况</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-1">
                <div class="statistics-item">
                  <div class="val">
                    <animate-number v-if="taskData && taskData.todayTaskCount" from="0" :to="taskData.todayTaskCount"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name">今日总数<br />中央派工任务</p>
                </div>
                <div class="statistics-item">
                  <div class="val">
                    <animate-number v-if="taskData && taskData.todalRepairTaskCount" from="0"
                      :to="taskData.todalRepairTaskCount" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name">今日总数<br />工程维修任务</p>
                </div>
                <div class="statistics-item">
                  <div class="val">
                    <animate-number v-if="pageConfig && pageConfig['今日能耗监测']" from="0" :to="pageConfig['今日能耗监测']"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name">今日总数<br />能耗监测</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box1-2">
            <div class="ibox-header">
              <span class="ibox-title">任务效率</span>
            </div>
            <div class="ibox-body">
              <div class="lengeds">
                <span><i style="background-color: #52F1F7;"></i>本月</span>
                <span><i style="background-color: #1C8FEA;"></i>上月</span>
              </div>
              <div class="fx-box">
                <div class="fx-1">
                  <div id="over_chart1_21" class="chart"></div>
                  <p>(平均响应时间)<br>中央运输任务</p>
                </div>
                <div class="fx-1">
                  <div id="over_chart1_22" class="chart"></div>
                  <p>(平均响应时间)<br>工程维修任务</p>
                </div>
                <div class="fx-1">
                  <div id="over_chart1_23" class="chart"></div>
                  <p>(平均用时)<br>中央运输任务</p>
                </div>
                <div class="fx-1">
                  <div id="over_chart1_24" class="chart"></div>
                  <p>(平均用时)<br>工程维修任务</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box1-3">
            <div class="ibox-header">
              <span class="ibox-title">最新发布任务</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-table">
                <table>
                  <tr>
                    <th>名称</th>
                    <th>起始地</th>
                    <th>目的地</th>
                    <th>任务类型</th>
                    <th>发布时间</th>
                    <th>状态</th>
                  </tr>
                  <tr v-for="(item, index) in taskList" :key="index">
                    <td>{{ item.title || "--" }}</td>
                    <td>{{ item.sdepartName || "--" }}</td>
                    <td>{{ item.edepartName || "--" }}</td>
                    <td>{{ item.typeName || "--" }}</td>
                    <td>{{ item.addtime | date("H:m") }}</td>
                    <td>
                      <span v-if="item.status == 0">已发布</span>
                      <span v-else-if="item.status == 1">进行中</span>
                      <span v-else-if="item.status == 2">已完成</span>
                      <span v-else-if="item.status == 3">未开始</span>
                      <span v-else-if="item.status == 4">审核通过</span>
                      <span v-else-if="item.status == 5">审核不通过</span>
                      <span v-else-if="item.status == 6">转让中</span>
                      <span v-else-if="item.status == 7">已转让</span>
                      <span v-else-if="item.status == 8">已评价</span>
                      <span v-else-if="item.status == 9">已作废</span>
                      <span v-else>--</span>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="box2-1 horizontal-overview">
            <div>
              <h4 class="num">
                <animate-number v-if="pageConfig && pageConfig['客户总数']" from="0" :to="pageConfig['客户总数']"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
              <p>客户总数</p>
            </div>
            <div>
              <h4 class="num">
                <animate-number v-if="pageConfig && pageConfig['服务医院总面积']" from="0" :to="pageConfig['服务医院总面积']"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
                <span style="font-size: 0.8vw;margin-left: -0.5vw;">㎡</span>
              </h4>
              <p>服务医院总面积</p>
            </div>
            <div>
              <h4 class="num">
                <animate-number v-if="pageConfig && pageConfig['服务人员总数']" from="0" :to="pageConfig['服务人员总数']"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
              <p>服务人员总数</p>
            </div>
            <div>
              <h4 class="num">
                <animate-number v-if="taskData && taskData.monthServeCount" from="0" :to="taskData.monthServeCount"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
              <p>本月服务总次数</p>
            </div>
          </div>
          <div class="ibox box2-2">
            <div class="animation-chart-2">
              <div class="sphere">
                <div class="sphere-bg"></div>
                <div class="sum">
                  <p class="name">总服务次数</p>
                  <div class="val">
                    <animate-number v-if="taskData.totalServeCount" from="0" :to="taskData.totalServeCount"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                </div>
              </div>
              <div class="cicle3"></div>
              <div class="cicle4"></div>
              <div class="cicle5"></div>
              <div class="cicle6"></div>
              <div class="cicle7"></div>
              <div class="cicle8">
                <span>{{ (taskData.totalServeResponseRate || 0) | number(0) }}<small>%</small></span>
                <p>响应率</p>
              </div>
              <div class="cicle9">
                <span>{{ (taskData.totalServeCompleteRate || 0) | number(0) }}<small>%</small></span>
                <p>完成率</p>
              </div>
              <div class="cicle10">
                <span>{{ (taskData.totalServeGoodRate || 0) | number(0) }}<small>%</small></span>
                <p>优质率</p>
              </div>
              <div class="cicle11">
                <span>{{ (taskData.totalServeResponseRate || 0) | number(0) }}<small>%</small></span>
                <p>满意度</p>
              </div>
            </div>
            <canvas class="rain" id="rain"></canvas>
          </div>
          <div class="ibox bgh box2-3">
            <div class="ibox-header">
              <!-- <span class="ibox-title hover" @click="turnPage(4, 'environment')">环境事务数据监测</span> -->
            </div>
            <div class="ibox-body">
              <div class="fx-box" style="height: 100%;padding-top:1vh;">
                <div class="fx-2" style="margin-right: 0.6vw;">
                  <div class="sbox">
                    <div class="sbox-title">终末消毒监测</div>
                    <div class="sbox-body fx-box fx-column">
                      <div class="fx-2">
                        <div class="chart" id="over_chart2_3"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="fx-2" style="margin-right: 0.6vw;">
                  <div class="sbox">
                    <div class="sbox-title">满意度监测</div>
                    <div class="sbox-body">
                      <div class="custom">
                        <div>
                          <div class="num">{{ feedback.todaySatisfiedRate || 100 }}<span
                              style="font-size: 0.68vw;margin-left:2px;">%</span></div>
                          <div class="tu"></div>
                          <p>今日客户满意度</p>
                        </div>
                        <div>
                          <div class="num">
                            {{ feedback.todayServerCount || 0 }}
                          </div>
                          <div class="tu chart" id="over_chart2_31"></div>
                          <p>今日客户服务件次</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="fx-2 fx-box fx-column">
                  <div class="fx-1">
                    <div class="sbox">
                      <div class="sbox-title">环境消杀</div>
                      <div class="sbox-body">
                        <div class="horizontal-overview2">
                          <div class="item">
                            <p class="des">累计消毒次数</p>
                            <p class="num">
                              <animate-number v-if="pageConfig && pageConfig['累计消毒次数']" from="0"
                                :to="pageConfig['累计消毒次数']" :duration="1000" easing="easeOutQuad"></animate-number>
                              <span v-else>0</span>
                            </p>
                          </div>
                          <div class="item">
                            <p class="des">今日消毒次数</p>
                            <p class="num">
                              <animate-number v-if="pageConfig && pageConfig['今日消毒次数']" from="0"
                                :to="pageConfig['今日消毒次数']" :duration="1000" easing="easeOutQuad"></animate-number>
                              <span v-else>0</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="fx-1" style="margin-top: 0.6vw;">
                    <div class="sbox">
                      <div class="sbox-title">院感监测</div>
                      <div class="sbox-body">
                        <div class="horizontal-overview2">
                          <div class="item">
                            <p class="des">累计监测数据</p>
                            <p class="num">
                              <animate-number v-if="pageConfig && pageConfig['累计监测数据']" from="0"
                                :to="pageConfig['累计监测数据']" :duration="1000" easing="easeOutQuad"></animate-number>
                              <span v-else>0</span>
                            </p>
                          </div>
                          <div class="item">
                            <p class="des">今日监测数据</p>
                            <p class="num">
                              <animate-number v-if="pageConfig && pageConfig['今日监测数据']" from="0"
                                :to="pageConfig['今日监测数据']" :duration="1000" easing="easeOutQuad"></animate-number>
                              <span v-else>0</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box3-1">
            <div class="ibox-header">
              <span class="ibox-title hover" @click="turnPage(1, 'transport')">中央运输系统监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="over_chart3_1"></div>
            </div>
          </div>
          <div class="ibox box3-2">
            <div class="ibox-header">
              <span class="ibox-title hover" @click="turnPage(2, 'maintain')">工程维修数据监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="over_chart3_2"></div>
            </div>
          </div>
          <div class="ibox box3-3">
            <div class="ibox-header">
              <span class="ibox-title hover" @click="turnPage(3, 'consume')">能耗数据监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="over_chart3_3"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      taskData: {},
      taskList: [],
      feedback: {},
      pageConfig: {},
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        setTimeout(this.initData, 200);
        this.timer = setInterval(this.initData, 10000);
      } else {
        clearInterval(this.timer);
      }
    }
  },
  mounted() {
    setTimeout(() => {
      charts.rainBg(".rain");
    });
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    turnPage(index, name) {
      this.$emit("change", index);
    },
    getPageConfig() {
      this.pageConfig = {};
      this.https("get", "/api/Values/ReadData", { "classKey": "home_config" }).then((res) => {
        const data = res.values;
        if (data) {
          this.pageConfig = JSON.parse(data);
        } else {
          this.pageConfig = {};
        }
        let colors = ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0", "#3BA272", "#9A60B4", "#EA7CCC", "#91CC75", "#FC8452"];
        let chart23Series = [{
          name: '',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 2,
          },
          label: {
            formatter: (params) => {
              return `{name|${params.name + " "}}{val|${params.value}}`
            },
            rich: {
              name: {
                fontSize: this.func.chartSize(12),
                lineHeight: this.func.chartSize(12),
                color: '#1C8FEA'
              },
              val: {
                fontSize: this.func.chartSize(12),
                lineHeight: this.func.chartSize(12),
                color: '#FDD214'
              }
            }
          },
          labelLayout: {
            align: "center",
          },
          labelLine: {
            lineStyle: {
              width: 0.5,
              type: "dashed",
            }
          },
          tooltip: {
            show: false,
          },
          data: this.pageConfig["终末消毒监测"].map((item, index) => {
            let colors = ["#149BED", "#FCAB32"];
            item.itemStyle = {
              color: {
                colorStops: [{
                  offset: 0,
                  color: colors[index],
                },
                {
                  offset: 1,
                  color: this.func.hexToRgba(colors[index], 0.8),
                },]
              }
            };
            return item;
          })
        }]
        let chart23Lenged = {
          orient: 'horizontal',
          top: 'bottom',
          left: 'center',
          bottom: 10,
        }
        charts.pieChart("over_chart2_3", chart23Series, chart23Lenged)

        const chart33Series = this.pageConfig["能耗数据监测"] || [];
        let chart33Len = 7;
        if (chart33Series.length > 0) {
          chart33Len = chart33Series[0].data.length;
        }
        let chart33Axis = [];
        for (let i = 1; i <= chart33Len; i++) {
          let nowDate = this.func.formatDate(new Date().getTime(), "yyyy-MM-dd");
          chart33Axis.push(this.func.formatDate(this.func.getNextDays(nowDate, i - chart33Len), "MM/dd"));
        }
        chart33Series.map((item, index) => {
          let config = {
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: this.func.chartSize(1.5),
              color: colors[index],
            },
            color: colors[index],
            areaStyle: {
              opacity: 0.2,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: colors[index],
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255,0)',
                }
              ])
            },
          }
          item = Object.assign(item, config);
        })
        charts.lineChart("over_chart3_3", chart33Axis, chart33Series);
      });
    },
    getTaskData() {
      this.taskData = {};
      this.https("get", "/api/Values/GetTaskCountData ").then((res) => {
        this.taskData = res || {};
      });
    },
    getTaskList() {
      this.taskList = [];
      this.https("get", "/api/Values/GetTasks").then((res) => {
        this.taskList = res || [];
      });
    },
    getFeedback() {
      this.feedback = {};
      this.https("get", "/api/Values/GetFeedback").then((res) => {
        this.feedback = res || {};
        let chartSeries = [{
          name: '',
          type: 'pie',
          radius: ['35%', '65%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: true,
          // itemStyle: {
          //   borderRadius: 2,
          // },
          label: {
            show: false,
            formatter: (params) => {
              return `{name|${params.name + " "}}{val|${params.value}}`
            },
            // rich: {
            //   name: {
            //     fontSize: this.func.chartSize(12),
            //     lineHeight: this.func.chartSize(12),
            //     color: '#1C8FEA'
            //   },
            //   val: {
            //     fontSize: this.func.chartSize(12),
            //     lineHeight: this.func.chartSize(12),
            //     color: '#FDD214'
            //   }
            // }
          },
          labelLayout: {
            align: "center",
          },
          labelLine: {
            lineStyle: {
              width: 0.5,
              type: "dashed",
            }
          },
          tooltip: {
            show: false,
          },
          data: [
            {
              name: "",
              value: this.feedback.todayCompleteServerCount,
              itemStyle: {
                opacity: 0.8,
                color: "#149BED",
              }
            },
            {
              name: "",
              value: this.feedback.todayServerCount - this.feedback.todayCompleteServerCount,
              itemStyle: {
                opacity: 0.8,
                color: "#FCAB32",
              }
            }
          ]
        }]
        let chartLenged = {
          // orient: 'horizontal',
          // top: 'bottom',
          // left: 'center',
          // bottom: 10,
          show: false,
        }
        charts.pieChart("over_chart2_31", chartSeries, chartLenged)
      });
    },
    getTransportTaskCount() {
      this.https("get", "/api/Values/GetTransportTaskCount").then((res) => {
        let data = res || {};
        let series = [{
          z: 10,
          name: '',
          type: 'pie',
          radius: ['20%', '60%'],
          center: ['60%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          label: {
            formatter: (params) => {
              return `{val|${params.value}}\n{name|${params.name}}`
            },
            rich: {
              name: {
                fontSize: this.func.chartSize(12),
                lineHeight: this.func.chartSize(12),
                color: '#1C8FEA'
              },
              val: {
                fontSize: this.func.chartSize(14),
                lineHeight: this.func.chartSize(20),
                color: '#DDF2FF'
              }
            }
          },
          labelLayout: {
            align: "center",
          },
          labelLine: {
            // show: false,
            lineStyle: {
              width: 0.5,
              type: "dashed",
            }
          },
          data: [
            { value: data.patientTransportTaskCount, name: '病员送检', itemStyle: { color: "#FA5D58" } },
            { value: data.docTransportTaskCount, name: '文书送检', itemStyle: { color: "#FDD214" } },
            { value: data.specimenTransportTaskCount, name: '标本送检', itemStyle: { color: "#9B73F0" } },
            { value: data.drugTransportTaskCount, name: '药品送检', itemStyle: { color: "#149BED" } },
            { value: data.materialsTransportTaskCount, name: '物资运输', itemStyle: { color: "#48D0E0" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['69%', '70%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "#004EE6" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['0%', '70%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['89%', '90%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "#004EE6" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['90%', '95%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        }]
        charts.pieChart("over_chart3_1", series)
      });
    },
    getRepairTaskCount() {
      this.https("get", "/api/Values/GetRepairTaskCount").then((res) => {
        let data = res || [];
        let dataX = [], series = [
          {
            name: "完成数据",
            data: [],
          },
          {
            name: "总数据",
            data: [],
          },
        ];
        data.map(item => {
          dataX.push(this.func.formatDate(item.date, "MM/dd"));
          series[0].data.push(item.completeRepairTaskCount);
          series[1].data.push(item.repairTaskCount);
        })
        charts.layerBlockChart("over_chart3_2", dataX, series);
      });
    },
    getTaskEfficiency() {
      this.https("get", "/api/Values/GetTaskEfficiency").then((res) => {
        let data = res || {};
        let seriesDatas = [{
          title: "中央运输平均响应用时",
          id: "over_chart1_21",
          data: [
            { name: "本月", value: parseInt(data.transportTaskResponseAvgTime), color: "#52F1F7", unit: '分钟' },
            { name: "上月", value: parseInt(data.transportTaskResponseAvgTime_Previous), color: "#1C8FEA", unit: '分钟' },
          ],
        }, {
          title: "工程维修平均响应用时",
          id: "over_chart1_22",
          data: [
            { name: "本月", value: parseInt(data.repairTaskResponseAvgTime), color: "#52F1F7", unit: '分钟' },
            { name: "上月", value: parseInt(data.repairTaskResponseAvgTime_Previous), color: "#1C8FEA", unit: '分钟' },
          ],
        }, {
          title: "中央运输任务平均用时",
          id: "over_chart1_23",
          data: [
            { name: "本月", value: parseInt(data.transportTaskUseAvgTime), color: "#52F1F7", unit: '分钟' },
            { name: "上月", value: parseInt(data.transportTaskUseAvgTime_Previous), color: "#1C8FEA", unit: '分钟' },
          ],
        }, {
          title: "中央运输任务平均用时",
          id: "over_chart1_24",
          data: [
            { name: "本月", value: parseInt(data.repairTaskUseAvgTime), color: "#52F1F7", unit: '分钟' },
            { name: "上月", value: parseInt(data.repairTaskUseAvgTime_Previous), color: "#1C8FEA", unit: '分钟' },
          ],
        }]
        seriesDatas.map(item => {
          var chart_count = 0;
          item.data.map(sItem => chart_count += sItem.value);
          charts.polycyclicChart(item.id, item.data[0].value + '分钟', item.data, chart_count);
        })
      });
    },
    initData() {
      this.getPageConfig();
      this.getTaskData();
      this.getTaskList();
      this.getFeedback();
      this.getTransportTaskCount();
      this.getRepairTaskCount();
      this.getTaskEfficiency();
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .statistics-table table td,
  .statistics-table table th {
    font-size: 1.28vh;
  }

  .box1-1 {
    height: 20.5vh;
  }

  .box1-2 {
    height: 26vh;

    .fx-box {
      display: flex;

      &>div {
        height: 100%;
        flex: 1;
        text-align: center;

        p {
          font-size: 0.72vw;
        }
      }

      .chart {
        height: 14vh;
      }
    }
  }

  .box1-3 {
    height: 39vh;
  }

  .box2-1 {
    height: 9vh;
    margin-bottom: 1vh;
  }

  .box2-2 {
    height: 50vh;
    background-color: transparent;
    border: none;
    background-image: none;
    background: none;
    margin-bottom: 1vh;
    background-color: rgba(40, 68, 249, 0.1);

    .des {
      display: flex;
      justify-content: space-between;
      position: absolute;
      padding: 0 1vw;
      width: 100%;
      left: 0;
      top: 2vh;
      color: #1C8FEA;

      .num {
        color: #52F1F7;
      }
    }
  }

  .box2-3 {
    height: 28.5vh;
  }

  .box3-1 {
    height: 28.5vh;
  }

  .box3-2 {
    height: 28.5vh;
  }

  .box3-3 {
    height: 28.5vh;
  }

  .rain {
    position: absolute;
    left: 0;
    top: 0;
  }

  .custom {
    display: flex;
    // flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .custom>div {
    flex: 1;
    text-align: center;

    .num {
      font-size: 2.2vh;
      font-weight: bold;
    }

    .tu {
      width: 70%;
      margin: 0 auto;
      color: #52F1F7;
      background-image: url("../assets/images/statistics-2-4.png");
      height: 9vh;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center bottom;

      &.chart {
        background: none;
        width: 100%;
      }
    }

    p {
      font-size: 0.68vw;
      white-space: nowrap;
    }
  }
}
</style>